<template>
  <!-- 对话框表单 -->
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="modelValue"
    @close="closeForm"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ state.form.title }}
      </div>
    </template>
    <div class="ba-operate-form ba-add-form" v-if="modelValue">
      <el-form
        ref="formRef"
        @keyup.enter="onAddSubmit(formRef)"
        :rules="rules"
        :model="state.form"
        :label-position="'left'"
        :label-width="120"
      >
        <div class="formTip" style="color: gray">{{ state.form.remark }}</div>
        <FormItem
          :type="state.form.type"
          v-model="state.form.value"
          prop="value"
          :data="{
            content: { '0': '禁用', '1': '启用' },
            childrenAttr: { border: true },
          }"
        />
      </el-form>
    </div>
    <template #footer>
      <div style="text-align: center; margin: auto">
        <!-- v-blur点击后自动失焦自定义指令 -->
        <el-button v-blur @click="onAddSubmit(formRef)" type="primary">
          设定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules, FormItemRule } from "element-plus";
import useCurrentInstance from "@/utils/useCurrentInstance";
import FormItem from "@/components/formItem/index.vue";
import { RuleType } from "async-validator";

const { proxy } = useCurrentInstance(); //mitt
const formRef = ref<FormInstance>();

//基础配置Item
interface RootObject {
  allow_del: number;
  content: string;
  extend: any[];
  group: string;
  id: number;
  name: string;
  rule: string;
  tip: string;
  title: string;
  type: string;
  unit: string;
  value: string;
  weigh: number;
  remark: string;
}
const state: {
  labelWidth: number;
  form: RootObject;
} = reactive({
  labelWidth: 160,
  form: {
    allow_del: 0,
    content: "",
    extend: [],
    group: "basics",
    id: 2,
    name: "wind_speed",
    rule: "required",
    tip: "流量告警值设定",
    title: "风速告警值设定",
    type: "string",
    unit: "m/s",
    value: "40",
    weigh: 99,
    remark: "范围[0-500]",
  },
});

const rules = reactive<FormRules>({
  value: [
    {
      required: true,
      message: "请输入或选择",
      trigger: state.form.type === "string" ? "blur" : "change",
      type: state.form.type as RuleType,
    },
  ],
});

interface Props {
  modelValue: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emits = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

const closeForm = () => {
  emits("update:modelValue", false);
};

const onAddSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      //设定成功后调用后端接口传递数据 state.form
    } else {
      console.log("error submit!", fields);
    }
  });
};

onMounted(() => {});
proxy.eventBus.on("onBaseConfigItem", (data: any) => {
  state.form = data.configItem;
});
proxy.eventBus.on("onLongRangeConfig", (data: any) => {
  state.form = data.configItem;
});
</script>
<style lang="scss" scoped>
.ba-operate-dialog {
  .ba-operate-form {
    .formTip {
      margin-left: 120px;
    }

    .el-form {
      :deep(.el-form-item__content) {
        margin-top: 10px;
      }
    }
  }
}

@media screen and (max-width: 460px) {
  .ba-operate-dialog {
    .ba-operate-form {
      .formTip {
        margin-left: 0px;
      }

      .el-form {
        :deep(.el-form-item__content) {
          margin: 10px 0 0 0;
        }
      }
    }
  }
}
</style>
